<template>
    <a-cascader v-model:value="value" :options="options" placeholder="Please select" dropdownClassName="Test"
        changeOnSelect />
    {{ value }}
</template>
<script setup>
import { ref, watch } from 'vue';
const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [{
            value: 'xihu',
            label: 'West Lake',
        }],
    }],
}, {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [{
        value: 'nanjing',
        label: 'Nanjing',
        children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
        }],
    }],
}];

const value = ref([]);


watch(value, val => {

    console.log(val);

}, { deep: true })



</script>
<style scoped lang="less">
:global(.Test) {
    background-color: #F60 !important;
    pointer-events: ;
}
</style>